import React, { useState, useEffect, useRef } from "react";
import { Form, Button, Input, Affix, Select, message, Space, Switch, Drawer, Row, Col, Modal } from "antd";
import cmdbres from "@/data/cmdbres";
import request, {requestIAM} from '@/utils/request';
import regexpUtil from "@/utils/regexpUtil";
import hcpUtils from "@/utils/hcpUtils";

const user = hcpUtils.getUser();
const CreateModelUnique = ({ history, visible, setVisible, onCreateFinish, info, moduleId }) => {
    const tip = (info && info.id) ? "编辑": "新建";
    const [loading, setLoading] = useState(false);
	const [form] = Form.useForm();
    const [data, setData] = useState([]);

    useEffect(() => {
        if(visible) {
            if(info && info.id) {
                const keys = info.keys?.map(item => item.keyId);
                form.setFieldsValue({
                    ...info,
                    keys
                 })
            }
            queryModelFilelds();
        }
    }, [visible]);

    const queryModelFilelds = async () => {
        try {
            let res = await request({ 
                ...cmdbres.queryModelPropertyList,
                data: {
                    queryFilter: {
                        EQ: {
                            cmModuleId: moduleId,
                        }
                    }
                }
            });
            if (res && res.code == 200) {
                const arr = res.data.filter(item=> item.woIsRequired == 1);
                setData(arr);
            } else {
                setData([]);
            }
        } catch (error) {
            setData([]);
            console.log(error);
        }
    }

	const onFinish = async (fieldsValue) => {
        setLoading(true);
        console.log(fieldsValue);
        const keys = fieldsValue.keys?.map(item=> {
            return {
                keyKind: "property",
                keyId: item
            }
        })
        const url = (info && info.id) ? cmdbres.updatePropertyUnique(info.id) : cmdbres.createPropertyUnique;
		let res = await request({
			...url,
			data: {
                cmModuleId: moduleId,
                mustCheck: false,
                keys,
                author: user.staffName
            }
		});
		setLoading(false);
		if (res && res.code == 200) {
			setVisible(false);
			message.success(`保存成功！`);
			if (typeof onCreateFinish == "function") onCreateFinish(res);
		}
	};

    const handleClose = () => {
        setVisible(false);
    }

    return (
        <Modal 
            title={`${tip}校验`}
            className="hcp-modal-sm"
            onCancel={handleClose}
            visible={visible}
            footer={null}
            destroyOnClose
            afterClose={() => {
                form.resetFields();
            }}
        >
            <Form
                form={form}
                labelCol={{ span: 5}}
                wrapperCol={{ span: 17 }}
                name="basic"
                onFinish={onFinish}
            >
                {/* <Form.Item 
                    label="规则类型"
                    name="type"
                    rules={[{required: true,message: '请选择'}]}
                >
                    <Select
                        placeholder="请选择"
                        style={{ width: "100%", marginRight: 10 }}
                    >
                        {
                            [{name: '单独唯一', value: 0},
                            {name: '联合唯一', value: 1}].map((item, index) => (
                                <Select.Option
                                    key={index}
                                    value={item.value}
                                >
                                    {item.name}
                                </Select.Option>
                            ))
                        }
                    </Select>
                </Form.Item> */}
                <Form.Item 
                    label="校验规则" 
                    name="keys" 
                    rules={[{required: true,message: '请选择校验规则'}]}
                >
                    <Select
                        showSearch
                        mode="multiple"
                        placeholder="请选择"
                        optionFilterProp="children"
                        getPopupContainer={(triggerNode) =>
                            triggerNode.parentElement
                        }
                    >
                        {
                            data.map((item, index) => (
                                <Select.Option
                                    key={item.id}
                                    value={item.id}
                                >
                                    {item.propertyName}
                                </Select.Option>
                            ))
                        }
                    </Select>
                </Form.Item>
                <div className="hcp-modal-body-footer">
                    <Form.Item wrapperCol={{ span: 24 }}>
                        <Button onClick={handleClose}>取消</Button>
                        <Button type="primary" htmlType="submit" loading={loading}>确定</Button>
                    </Form.Item>
                </div>
            </Form>
        </Modal>
    );
};

export default CreateModelUnique;
